<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body,
        #mask {
            height: 100%;
            width: 100%;
        }

        th,
        td {
            padding: 20px;
            width: 80px;
        }

        #nums {
            width: 200px;
            margin: 0 auto;
        }
        #J_addTable,
        #J_change{
            display: none;
            position: absolute;
            z-index: 2;
            top: 0;
            left: 50%;
            margin-left: -170px;
            background-color: #fff;
        }
        #mask{
            background-color: rgba(0,0,0,0.4);
            position: absolute;
            top: 0;
            display: none;
        }


    </style>
</head>
<body>
    <div class="new">
        <button id="new">新增</button>
    </div>
    <table  border="1" cellpadding="0" cellspacing="0" align="center" >
        <caption>访问学生信息</caption>
        <thead>
        <tr>
            <th>学生ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>大学</th>
            <th>城市</th>
            <th>学号</th>
            <th>头像</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tb">

        </tbody>
    </table>
    <div id="nums">
        <button id="left">&lt;</button>
        <span id="pags">

        </span>
    <button id="right">&gt;</button>
    </div>
    <div id="J_addTable">
        <table border="1" cellpadding="0" cellspacing="0" align="center">
            <caption>添加学生信息</caption>
            <tr>
                <td>
                    姓名
                </td>
                <td>
                    <input type="text" name="name" id="stuName"><span></span>
                </td>
            </tr>
            <tr>
                <td>
                    性别
                </td>
                <td>
                    <input type="radio" name="sex" value="1" checked>男
                    <input type="radio" name="sex" value="2">女
                </td>
            </tr>
            <tr>
                <td>
                    年龄
                </td>
                <td>
                    <input type="text" name="age" id="stuAge"><span></span>
                </td>
            </tr>
            <tr>
                <td>
                    大学
                </td>
                <td>
                    <input type="text" name="edu" id="stuEdu"><span></span>
                </td>
            </tr>
            <tr>
                <td>
                    城市
                </td>
                <td>
                    <select name="city" id="stuCity">
                        <!--                    [北京(1)，福州(2)，厦门(3)，龙岩(4)，泉州(5)]"-->
                        <option value="1">北京</option>
                        <option value="2">福州</option>
                        <option value="3">厦门</option>
                        <option value="4">龙岩</option>
                        <option value="5">泉州</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    学号
                </td>
                <td>
                    <input type="text" name="no" id="stuNum"><span></span>
                </td>
            </tr>
            <tr>
                <td>
                    操作
                </td>
                <td>
                    <input type="button" id="btn" value="添加">
                </td>
            </tr>
        </table>
    </div>
    <div id="J_change">
        <table border="1" cellpadding="0" cellspacing="0" align="center">
            <caption>修改学生信息</caption>
            <tr>
                <td>
                    请输入学生id
                </td>
                <td>
                    <input type="text" name="id" id="stuId">
                </td>
            </tr>
            <tr>
                <td>
                    姓名
                </td>
                <td>
                    <input type="text" name="name" id="changeName">
                </td>
            </tr>
            <tr>
                <td>
                    性别
                </td>
                <td>
                    <input type="radio" name="sex" value="1">男
                    <input type="radio" name="sex" value="2">女
                </td>
            </tr>
            <tr>
                <td>
                    年龄
                </td>
                <td>
                    <input type="text" name="age" id="changeAge">
                </td>
            </tr>
            <tr>
                <td>
                    大学
                </td>
                <td>
                    <input type="text" name="edu" id="changeEdu">
                </td>
            </tr>
            <tr>
                <td>
                    城市
                </td>
                <td>
                    <select name="city" id="changeCity">
                        <!--                    [北京(1)，福州(2)，厦门(3)，龙岩(4)，泉州(5)]"-->
                        <option value="1">北京</option>
                        <option value="2">福州</option>
                        <option value="3">厦门</option>
                        <option value="4">龙岩</option>
                        <option value="5">泉州</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    学号
                </td>
                <td>
                    <input type="text" name="no" id="changeNum">
                </td>
            </tr>
            <tr>
                <td>
                    操作
                </td>
                <td>
                    <input type="button" id="change" value="确认修改">
                </td>
            </tr>
        </table>
    </div>
    <div id="mask"></div>

    <script src="js/jquery-1.12.1.js"></script>
    <script src="js/studenList.js"></script>
</body>
</html>